<!--标签管理-->
<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <el-form-item>
        <el-input v-model="dataForm.tagName" placeholder="标签名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="addTag()">新增</el-button>
      </el-form-item>
    </el-form>
    <!--    列表-->
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;" type="flex" justify="center">

      <el-table-column prop="tagName" header-align="center" align="center" label="标签名称"></el-table-column>
      <el-table-column prop="gmtCreate" header-align="center" align="center" label="创建时间"></el-table-column>
      <el-table-column prop="gmtModified" header-align="center" align="center" label="更新时间"></el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="reviseTag(scope.row.id,scope.row.tagName)">修改</el-button>
          <el-button type="text" size="small" @click="deleteTag(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <value-manage-tag-add ref="tagAdd" @freshlist="getDataList"></value-manage-tag-add>

    <el-dialog title="删除标签" :close-on-click-modal="false" :visible.sync="cancleTagViewShow"
               style="width: 70%;min-width: 900px">
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleTagViewShow = false">取消</el-button>
        <el-button type="primary" @click="cancleTagDialogAction()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import ValueManageTagAdd from "./valueManageTagAdd";
    export default {
        name: "TagManageList",
        components: {ValueManageTagAdd},
        data() {
            return {

                dataForm: {
                    tagName: "",

                },
                userId: "",
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                bookmanages: true,
                cancleTagViewShow:false,
                cancleTagDialogId:"",

            };
        },
        mounted() {
            this.getDataList();
        },
        methods: {
            search(){
                this.pageIndex = 1;
                this.getDataList();
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;

                let obj = {
                    page: this.pageIndex,
                    limit: this.pageSize
                };

                if (this.dataForm.tagName) {
                    obj.tagName = this.dataForm.tagName;
                }
                this.$http({
                    url: this.$http.adornUrl("/value/tag/list"),
                    method: "get",
                    params: this.$http.adornParams(obj)
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.dataList = data.page.list;
                        this.totalPage = data.page.totalCount;
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },

            reviseTag(id,tagName) {
                this.$nextTick(() => {
                    this.$refs.tagAdd.init(id,tagName);
                });
            },
            goBack() {
                this.bookmanages = true;
            },

            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },

            // 删除标签
            cancleTagDialogAction(){

                this.dataListLoading = true;

                let obj = {id: this.cancleTagDialogId};

                this.$http({
                    url: this.$http.adornUrl("/value/tag/delete"),
                    method: "delete",
                    data: this.$http.adornData(obj)
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: "删除成功",
                            type: "success"
                        })
                        this.cancleTagViewShow = false;
                        this.getDataList();
                    } else if (data.code === 500){
                        this.$message({
                            message: data.msg,
                            type: "error"
                        })
                    }
                    this.dataListLoading = false;
                });

            },

            //删除标签
            deleteTag(id) {

                this.cancleTagDialogId = "";
                this.cancleTagViewShow = true;
                this.cancleTagDialogId = id;

            },
            // 新增 / 修改
            addTag() {
                this.$nextTick(() => {
                    this.$refs.tagAdd.init();

                });
            }
        }
    }
</script>

<style scoped>

</style>
